<template>
	<view class="page">
		<view class="search_top">
			<view class="search_input_view">
				<image class="search_icon" :src="imgPrefix('/static/image/icon/search_icon.png')"></image>
				<input class="search_input" @confirm="toSearch(searchValue)" placeholder-class="search_input_placeholder" :placeholder="userIdentity==0?'输入老师/语种进行查找':'输入关键词进行资讯查找'" v-model="searchValue" type="text"/>
			</view>
			<view class="search_value">
				<view class="search_title">热门搜索</view>
				<view class="search_hot_list">
					<view v-for="(item, index) in searchHotValue" :key="index" class="search_hot" @tap="toSearch(item)">
						<image class="search_hot_icon" :src="imgPrefix('/static/image/icon/hot_icon.png')"></image>
						<text class="search_hot_text">{{ item }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="search_history">
			<view class="history_top">
				<text class="history_title">历史搜索</text>
				<text class="clear_history" @tap="clearHistory">清除全部</text>
			</view>
			<view class="history_list">
				<view class="history_search" v-for="(itemy, indey) in historyList" :key="indey" @tap="toSearch(itemy)">{{ itemy }}</view>
			</view>
		</view>
	</view>
</template>

<script>
const app = getApp();
import { commonMixinFun } from '@/static/mixins/common.js';
export default {
	mixins: [commonMixinFun],
	data() {
		return {
			searchValue: '',
			searchHotValue: ['阿拉伯语', '德语', '日语', '韩语'],
			historyList: []
		};
	},
	onLoad() {
	},
	onShow() {
		this.historyList = app.globalData.searchHistory||[];
		// app._log(app.globalData)
	},
	methods:{
		// 点击搜索
		toSearch(value=''){
			if(value.trim()==''){
				this.showToast(this.placeholder);
			}else{
				let {historyList,userIdentity}=this;
				let page = userIdentity==0?'/pages/search_from/index':'/pages/teacher/information_input_from/index';
				this.pageTo(page, {value:value}, '',res=>{
					setTimeout(()=>{
						app.globalData.searchHistory = [value,...new Set(historyList)];
					},500)
				})
			}
		},
		
		// 点击清除搜索
		clearHistory(){
			if(this.historyList.length!=0){
				uni.showModal({
					title:'温馨提示',
					content:'确认要清除全部记录吗？',
					cancelColor:'',
					cancelText:'取消',
					confirmColor:'',
					confirmText:'确认清除',
					success:res=>{
						if(res.confirm){
							this.historyList= [];
							app.globalData.searchHistory=[]
						}
					}
				})
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.search_ {
	&top {
		width: 750rpx;
		height: 262rpx;
		background-color: #ffffff;
		padding: 24rpx 48rpx;
		.search_input_view {
			width: 654rpx;
			height: 72rpx;
			background-color: #f4f4f4;
			border-radius: 36rpx;
			display: flex;
			align-items: center;
			padding: 0 22rpx;
			overflow: hidden;
			.search_icon {
				width: 26rpx;
				height: 24rpx;
				margin-right: 12rpx;
			}
			.search_input {
				font-size: 26rpx;
				flex: 1;
				&_placeholder {
					color: #cccccc;
				}
			}
		}
	}
	&value {
		.search_title {
			margin: 24rpx 0;
		}
		.search_hot_list {
			display: flex;
			flex-wrap: wrap;
			.search_hot {
				padding: 12rpx 16rpx 12rpx 8rpx;
					background-color: #f7f7f7;
					border-radius: 8rpx;
					margin-right: 24rpx;
				&_icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}
				&_text {
					font-size: 26rpx;
					color: #252748;
					opacity: 0.7;
				}
			}
		}
	}
	&history {
		margin-top: 16rpx;
		background-color: #fff;
		.history_{
		&top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 82rpx;
			padding:0 48rpx;
				font-size: 24rpx;
			border-bottom: 2rpx solid rgba(204,204,204,0.5);
			.history_title{
				color: #252748;
			}
			.clear_history{
				color: rgba(143, 143, 154, 0.5);
			}
		}
		&list{
			padding: 32rpx 48rpx 0;
			.history_search{
				color: #8f8f9a;
				padding-bottom: 32rpx;
			}
		}
		}
	}
}
</style>
